<template>
  <div>
    <el-form :model="form" ref="ruleForm" v-if="form.internalRateOfReturnCalcMethod == 2">
      <div style="display: flex;flex-wrap: wrap;justify-content: space-between; align-items: center;  box-sizing: border-box; padding-left: 50px;">
        <el-card v-for="(item, ind) in form.quotationCustomerTypeIrrList" :key="item.id" style="min-width: 49%;min-height: 200px;margin-bottom: 20px;">
          <div style="font-size: 13px;color: #606266;">
            <span>客户类型：</span>
            <span>{{ item.quotationCustomerTypeName }}</span>
            <span style="margin-left: 50px;">
              <el-radio-group v-model="item.dimensionality" :disabled="type == 'detail'" @change="changeRadio(ind,item)">
                <el-radio :label="1">期限</el-radio>
                <el-radio :label="2">定价档次</el-radio>
              </el-radio-group>
            </span>
          </div>
          <div style="margin-top: 10px;">
            <el-table :data="item.irrList" border v-if="item.dimensionality == 1">
              <el-table-column label="最小月份" align="center">
                <template #default="{row,$index}">
                  <el-form-item :prop="`quotationCustomerTypeIrrList.${ind}.irrList.${$index}.startMonths`" :rules="{required: true,trigger: 'blur', message: '请输入最小月份' }">
                    <el-input :disabled="type == 'detail'" maxlength="10" v-model="row.startMonths" placeholder="请输入" @input="row.startMonths = row.startMonths.replace(/^0|[^0-9]/g, '')"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="最大月份（含）" align="center">
                <template #default="{row,$index}">
                  <el-form-item :prop="`quotationCustomerTypeIrrList.${ind}.irrList.${$index}.endMonths`" :rules="{required: true,trigger: 'blur', message: '请输入最大月份' }">
                    <el-input :disabled="type == 'detail'" maxlength="10" v-model="row.endMonths" placeholder="请输入" @input="row.endMonths =row.endMonths.replace(/^0|[^0-9]/g, '')"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="燃油IRR(%)" align="center">
                <template #default="{row,$index}">
                  <el-form-item :prop="`quotationCustomerTypeIrrList.${ind}.irrList.${$index}.fuelIrr`" :rules="{required: true,trigger: 'blur', message: '请输入燃油' }">
                    <el-input :disabled="type == 'detail'" v-model="row.fuelIrr" placeholder="请输入" maxlength="10" @input="row.fuelIrr=row.fuelIrr.replace(/^\D*([0-9]\d*\.?\d{0,6})?.*$/,'$1')"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="新能源IRR(%)" align="center">
                <template #default="{row,$index}">
                  <el-form-item :prop="`quotationCustomerTypeIrrList.${ind}.irrList.${$index}.newEnergyIrr`" :rules="{required: true,trigger: 'blur', message: '请输入新能源' }">
                    <el-input :disabled="type == 'detail'" v-model="row.newEnergyIrr" placeholder="请输入" maxlength="10" @input="row.newEnergyIrr=row.newEnergyIrr.replace(/^\D*([0-9]\d*\.?\d{0,6})?.*$/,'$1')"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="" label="" width="50" v-if="type !== 'detail' && item.dimensionality == 1" align="center">
                <template slot-scope="scope">
                  <i class="el-icon-delete" style="cursor: pointer;" @click="dele(scope, ind)"></i>
                </template>
              </el-table-column>
            </el-table>
            <el-table :data="item.irrList" border v-if="item.dimensionality == 2">
              <el-table-column label="定价档次" align="center">
                <template #default="{row,$index}">
                  <el-form-item :prop="`quotationCustomerTypeIrrList.${ind}.irrList.${$index}.maintenancePackageName`" :rules="{required: true,trigger: 'blur'}">
                    <el-input disabled v-model="row.maintenancePackageName"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="燃油IRR(%)" align="center">
                <template #default="{row,$index}">
                  <el-form-item :prop="`quotationCustomerTypeIrrList.${ind}.irrList.${$index}.fuelIrr`" :rules="{required: true,trigger: 'blur', message: '请输入燃油' }">
                    <el-input :disabled="type == 'detail'" v-model="row.fuelIrr" placeholder="请输入" maxlength="10" @input="row.fuelIrr=row.fuelIrr.replace(/^\D*([0-9]\d*\.?\d{0,6})?.*$/,'$1')"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="新能源IRR(%)" align="center">
                <template #default="{row,$index}">
                  <el-form-item :prop="`quotationCustomerTypeIrrList.${ind}.irrList.${$index}.newEnergyIrr`" :rules="{required: true,trigger: 'blur', message: '请输入新能源' }">
                    <el-input :disabled="type == 'detail'" v-model="row.newEnergyIrr" placeholder="请输入" maxlength="10" @input="row.newEnergyIrr=row.newEnergyIrr.replace(/^\D*([0-9]\d*\.?\d{0,6})?.*$/,'$1')"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
            <el-button v-if="type !== 'detail' && item.dimensionality == 1" style="margin-top: 10px; cursor: pointer;" type="info" plain size="mini" @click="addTable(ind)">增加<i class="el-icon-plus"></i></el-button>
          </div>
        </el-card>
      </div>
    </el-form>

  </div>
</template>
<script>
import { getCommonList } from "@/api/globalField";
export default {
  props: {
    value: {
      type: Object,
      default: {},
    },
    type: {
      type: String,
      default: "",
    },
  },
  computed: {
    form: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("update:value", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
  },
  created() {
    // if (this.$route.query.type == "add") {
    this.getList();
    // }
  },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    changeRadio(i, item) {
      this.$refs["ruleForm"].clearValidate()
      // if (this.type == 'add') {
      if (this.form.quotationCustomerTypeIrrList[i].dimensionality == 2) {
        item.irrList = this.list.map((item, i) => {
          return {
            maintenancePackageId: item.id,
            maintenancePackageName: item.maintenancePackageName,
          };
        });
      } else {
        this.form.quotationCustomerTypeIrrList[i].irrList = [{}];
      }
      // }
    },
    async getList() {
      try {
        let { data } = await getCommonList();
        this.list = data;
        console.log(this.list, "子组件");
      } catch (error) {
        console.log(error);
      }
    },
    handleEffect() {
      let bool;
      this.$refs?.ruleForm?.validate((valid) => {
        if (valid) {
          bool = true;
        } else {
          this.error();
          bool = false;
        }
      });
      return bool;
    },
    error() {
      this.$nextTick(() => {
        const el = document.querySelectorAll(".el-form-item__error")[0];
        el && el.scrollIntoView({ block: "center", behavior: "smooth" });
      });
    },
    dele(row, i) {
      this.form.quotationCustomerTypeIrrList[i].irrList.splice(row.$index, 1);
    },
    addTable(i) {
      this.form.quotationCustomerTypeIrrList[i].irrList.push({
        startMonths: null,
        endMonths: null,
        fuelIrr: null,
        newEnergyIrr: null,
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
